<template>
	<view class="container padding-top-xs">
		<!--  #ifdef  APP-PLUS-->
		<uni-nav-bar fixed='true' @clickLeft='back' statusBar='true' style="width: 100%;">

			<view slot='left'>
				<text class="cuIcon-back"></text>

			</view>
			<view class="status-center padding-left center bg-F4F4F4  round" style="height: 70rpx;margin-left: -30px;">
				<image :src="baseUrl + '/static/search_for.png'" mode="" style="width: 25rpx;height: 25rpx;">
				</image>
				<input type="text" v-model="title" @input='handSearch' value="" class="text-13 f-grow1 padding-left-sm"
					placeholder="搜索问题" />
			</view>

		</uni-nav-bar>
		<!--  #endif -->
		<!--  #ifdef     MP-WEIXIN -->
		<kg-custom :isBack="true" bgColor="bg-white">
			<block slot="left">
				<view class="flex justify-start align-center bg-F4F4F4 padding-left round margin-left-sm"
					style="height: 70rpx;width: 460rpx;">
					<image :src="baseUrl + '/static/search_for.png'" mode="" style="width: 25rpx;height: 25rpx;">
					</image>
					<input @input='handSearch' type="text" v-model="title" value=""
						class="text-13 f-grow1 padding-left-sm" placeholder="搜索问题" />
				</view>
			</block>
		</kg-custom>
		<!--  #endif -->
		<view class="flex text-13 text-333">
			<scroll-view class="left" :scroll-y='true' scroll-with-animation :scroll-top="verticalNavTop"
				style="height:calc(100vh - 130rpx)">
				<view class="flex justify-center align-center" :class="index==tabCur?'on':''"
					v-for="(item,index) in typeList" @tap="TabSelect" :data-first='item.id' :data-id="index">
					{{item.name}}
				</view>
			</scroll-view>
			<scroll-view class="right f-grow1 bg-white padding text-sm position-relative" :scroll-y='true'
				style="height:calc(100vh - 130rpx);width: calc(100% - 220rpx);">
				<view class="" v-for='(item,index) in question' style="margin-bottom: 30rpx;width:100%: ;">
					<view class="solid flex justify-between align-center padding " @click="checkType(item)">
						<view class="color">
							{{item.title}}
						</view>
						<view class="cuIcon-unfold">

						</view>
					</view>
					<view class="margin-top text-999" style="width:100%" v-if='item.checked'>
						<view v-html="item.answerContent"></view>
					</view>
				</view>
				<view class="fooder flex justify-between align-center">
					<button @click="toPage('/filePage/pages/feedback/feedback')"
						class="bg-to-right2 text-white text-15 padding-top-sm padding-bottom-sm padding-left padding-right round">意见反馈</button>
					<button @click="toPage('/filePage/pages/customer/customer')"
						class="bg-to-right text-white text-15 padding-top-sm padding-bottom-sm padding-left padding-right round">联系客服</button>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: this.$config.baseUrl,
				CustomBar: this.CustomBar,
				tabCur: 0,
				verticalNavTop: 0,
				typeList: [],
				question: [],
				title: '',
				firstId: ''
			};
		},
		onLoad() {
			this.getTypeList()
		},
		methods: {
			back() {
				console.log(1111)
				uni.navigateBack({

				})
			},
			TabSelect(e) {
				this.tabCur = e.currentTarget.dataset.id;
				this.verticalNavTop = (e.currentTarget.dataset.id - 1) * 50
				this.firstId = e.currentTarget.dataset.first
				this.getAllList()
			},
			toPage(url) {
				this.$util.openNewPage(url)
			},
			async getTypeList() {
				const [err, rs] = await this.$get(this.$api.treeList, {
					type: 6
				})

				if (rs) {
					this.typeList = rs.data
					if (this.typeList.length != 0) {
						this.getAllList(this.typeList[0].id)
					}
					console.log(this.typeList)

				}
			},
			checkType(item) {
				console.log(item)
				item.checked = !item.checked
				console.log(item)
			},
			handSearch() {
				this.getAllList()
			},
			async getAllList(firstCategoryId) {

				const data = {
					firstCategoryId: firstCategoryId ? firstCategoryId : this.firstId,
					status: 1
				}
				if (this.title) {
					data['title'] = this.title
				}
				const [err, rs] = await this.$get(this.$api.allList, data)
				if (rs) {
					console.log(rs)
					for (let i in rs.data) {
						this.$set(rs.data[i], 'checked', false)
					}
					this.question = rs.data

				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.left {
		width: 220rpx;

		view {
			width: 220rpx;
			height: 100rpx;
		}

		.on {
			background: #fff;
			font-size: 30rpx;
			font-weight: bold;
		}
	}

	.right {
		.fooder {
			position: fixed;
			bottom: 60rpx;
			left: 250rpx;
			right: 20rpx;
		}
	}

	.status-center {
		width: 460rpx;
		display: flex;
		align-items: center;
	}
</style>
